<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">


    <ui:composition template="/WEB-INF/facelets/template.xhtml">

        <ui:param name="title" value="JadeTalk" />

        <ui:define name="content">

            <div>
                <div id="imageDropZone">
                    <h:form enctype="multipart/form-data" rendered="#{userSessionBean.loggedIn}">
                        <p:fileUpload fileUploadListener="#{uploadControllerBean.handleFileUpload}"
                                      allowTypes="*.jpg;*.png;*.gif;" description="Images" rendered="#{userSessionBean.loggedIn}" />
                    </h:form>
                    <h:outputText rendered="#{!userSessionBean.loggedIn}" value="Login or register to upload images." />
                </div>

                <div id="loginForm">
                    <h3>Login</h3>
                    <h:form>
                        <h:panelGrid rendered="#{!userSessionBean.loggedIn}" columns="2" cellpadding="5">
                            Username: <h:inputText value="#{loginBackingBean.name}" required="true" label="Username" />
                            Password: <h:inputSecret value="#{loginBackingBean.password}" required="true" label="Password" />

                            <h:commandButton value="Login" action="#{loginControllerBean.login}" styleClass="loginButton">
                                <f:ajax  render="@all" execute="@form" />
                            </h:commandButton>

                            <h:outputText value="#{loginBackingBean.message}" />

                        </h:panelGrid>
                        <b><h:outputText rendered="#{userSessionBean.loggedIn}" value="Welcome #{userSessionBean.user.username}!"/></b><br/>
                        <h:outputText rendered="#{userSessionBean.loggedIn}" value="You can now upload an image using the controls on the left."/>
                    </h:form>
                </div>
            </div>

            <div class="clearDiv" />
            
            <div id="photoStream">
                <div>
                    <ui:repeat id="imageList" value="#{imageViewBackingBean.latest}" var="image">

                            <h:outputLink value="./image-#{image.id}">
                                <div class="photostreamImage">
                                    <h:graphicImage styleClass="photostreamImage" url="image/#{image.imageLocation}" />
                                </div>
                            </h:outputLink>
                    </ui:repeat>
                    <div class="clearDiv" />
                </div>
            </div>
            
            <div class="clearDiv" />

        </ui:define>

    </ui:composition>

</html>

